<template>
  <el-tree
    :data="treeDataWithCount"
    :props="defaultProps"
    node-key="index"
    :render-content="renderContent"
    show-checkbox
  ></el-tree>
</template>

<script>
export default {
  data() {
    return {
      // 原始树形数据
      treeData: [
        {
          staticSize: 48,
          staticName: "2023年",
          staticDate: "2023",
          staticDateInt: null,
          childList: [
            {
              staticSize: 12,
              staticName: "8月",
              staticDate: "8",
              staticDateInt: 8,
              childList: [
                {
                  staticSize: 1,
                  staticName: "1",
                  staticDate: "2023-08-01",
                  staticDateInt: null,
                  childList: null,
                  index: 11,
                },
                {
                  staticSize: 1,
                  staticName: "4",
                  staticDate: "2023-08-04",
                  staticDateInt: null,
                  childList: null,
                  index: 14,
                },
                {
                  staticSize: 1,
                  staticName: "5",
                  staticDate: "2023-08-05",
                  staticDateInt: null,
                  childList: null,
                  index: 15,
                },
                {
                  staticSize: 1,
                  staticName: "8",
                  staticDate: "2023-08-08",
                  staticDateInt: null,
                  childList: null,
                  index: 16,
                },
                {
                  staticSize: 1,
                  staticName: "24",
                  staticDate: "2023-08-24",
                  staticDateInt: null,
                  childList: null,
                  index: 12,
                },
                {
                  staticSize: 7,
                  staticName: "25",
                  staticDate: "2023-08-25",
                  staticDateInt: null,
                  childList: null,
                  index: 13,
                },
              ],
              index: 10,
            },
            {
              staticSize: 6,
              staticName: "9月",
              staticDate: "9",
              staticDateInt: 9,
              childList: [
                {
                  staticSize: 6,
                  staticName: "6",
                  staticDate: "2023-09-06",
                  staticDateInt: null,
                  childList: null,
                  index: 18,
                },
              ],
              index: 17,
            },
            {
              staticSize: 28,
              staticName: "10月",
              staticDate: "10",
              staticDateInt: 10,
              childList: [
                {
                  staticSize: 27,
                  staticName: "1",
                  staticDate: "2023-10-01",
                  staticDateInt: null,
                  childList: null,
                  index: 20,
                },
                {
                  staticSize: 1,
                  staticName: "4",
                  staticDate: "2023-10-04",
                  staticDateInt: null,
                  childList: null,
                  index: 21,
                },
              ],
              index: 19,
            },
            {
              staticSize: 1,
              staticName: "11月",
              staticDate: "11",
              staticDateInt: 11,
              childList: [
                {
                  staticSize: 1,
                  staticName: "21",
                  staticDate: "2023-11-21",
                  staticDateInt: null,
                  childList: null,
                  index: 7,
                },
              ],
              index: 6,
            },
            {
              staticSize: 1,
              staticName: "12月",
              staticDate: "12",
              staticDateInt: 12,
              childList: [
                {
                  staticSize: 1,
                  staticName: "5",
                  staticDate: "2023-12-05",
                  staticDateInt: null,
                  childList: null,
                  index: 9,
                },
              ],
              index: 8,
            },
          ],
          index: 5,
        },
        {
          staticSize: 2,
          staticName: "2024年",
          staticDate: "2024",
          staticDateInt: null,
          childList: [
            {
              staticSize: 1,
              staticName: "1月",
              staticDate: "1",
              staticDateInt: 1,
              childList: [
                {
                  staticSize: 1,
                  staticName: "1",
                  staticDate: "2024-01-01",
                  staticDateInt: null,
                  childList: null,
                  index: 2,
                },
              ],
              index: 1,
            },
            {
              staticSize: 1,
              staticName: "8月",
              staticDate: "8",
              staticDateInt: 8,
              childList: [
                {
                  staticSize: 1,
                  staticName: "6",
                  staticDate: "2024-08-06",
                  staticDateInt: null,
                  childList: null,
                  index: 4,
                },
              ],
              index: 3,
            },
          ],
          index: 0,
        },
        {
          staticSize: 27,
          staticName: "空白",
          staticDate: "空白",
          staticDateInt: null,
          childList: null,
          index: 22,
        },
      ],
      // 带有子节点计数的树形数据
      treeDataWithCount: [],
    };
  },
  computed: {
    defaultProps() {
      return {
        children: "childList",
        label: "staticName",
      };
    },
  },
  created() {
    this.treeDataWithCount = this.addCountToTreeData(this.treeData);
  },
  methods: {
    // 递归函数，用于添加子节点计数
    addCountToTreeData(data) {
      return data.map((node) => {
        const newNode = { ...node };
        if (newNode.childList && newNode.childList.length > 0) {
          newNode.count = newNode.childList.length; // 添加子节点计数
          newNode.childList = this.addCountToTreeData(newNode.childList); // 递归处理子节点
        }
        return newNode;
      });
    },
    // 自定义渲染内容
    renderContent(h, { node, data, store }) {
      return h("span", [
        h("span", data.staticName),
        data.count ? h("span", ` (${data.count})`) : null,
      ]);
    },
  },
};
</script>